<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <div class="header" style="width: 100%">
      <span>
        <el-icon color="#3B98F7" :size="25" align="middle" style="top: 5px">
          <Clock style="font-size: 25px" />
        </el-icon>
      </span>
      <span class="header-title"> 待办事项 </span>
      <span style="float: right; color: #a3a3a3">
        <em style="font-style: normal; color: #3b98f7; font-size: 20px">{{ tableData.length }}</em
        >条待处理</span
      >
    </div>
    <div class="container">
      <el-table :data="tableData" style="width: 100%" max-height="280px" :show-header="false">
        <el-table-column prop="title" label="title" />
      </el-table>
      <!-- <el-row v-for="item in tableData" :key="item.id" :gutter="20">
        <el-col class="container-col" :span="24" :offset="0">
          <span class="container-title">{{ item.title }}</span>
        </el-col>
      </el-row> -->
    </div>
  </el-card>
</template>

<script setup lang="ts">
const tableData = [
  {
    id: 1,
    title: "实名制平台测试项目未维护【地方平台监控预警规则信息】",
  },
  {
    id: 1,
    title: "实名制平台测试项目未维护【欠薪处置支付明细】",
  },
  {
    id: 1,
    title: "实名制平台测试项目未维护【地方平台欠薪情况信息】",
  },
  {
    id: 1,
    title: "实名制平台测试项目未维护【部平台下发疑点调查结果信息】",
  },
  {
    id: 1,
    title: "实名制平台测试项目未维护【工资保证金账户信息】",
  },
  {
    id: 1,
    title: "实名制平台测试项目未维护【工资保证金账户支付明细信息】",
  },
  {
    id: 1,
    title: "实名制平台测试项目未维护【工资保证金账户收支信息】",
  },
  {
    id: 1,
    title: "实名制平台测试项目未维护【部平台下发疑点欠薪处置结果信息】",
  },
];
</script>

<style lang="scss" scoped>
.pt20 {
  padding-top: 20px;
}

.header-title {
  font-size: 16px;
  color: #101010;
  font-weight: 600;
}

.header-description {
  font-size: 14px;
  color: #a3a3a3;
}

.container {
  padding-top: 20px;
}

.container-col {
  height: 35px;
  line-height: 35px;
  border-bottom: 1px solid #e2e2e2;
}

.container-title {
  font-size: 14px;
  color: #101010;
}
</style>
